<!--
 * @Author: daokun.du@hand-china.com
 * @Date: 2023-06-05 14:44:19
 * @LastEditTime: 2023-06-05 15:05:46
 * @LastEditors: daokun.du@hand-china.com
 * @Description: 
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_watch实现</title>
    <!--引入VUE-->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text/javascript" v-model="firstName" /><br/><br/>
      名：<input type="text/javascript" v-model="secondName" /><br/><br/>
      全名：<span>{{fullName}}</span>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false

    // VUE默认是可以监视多层级结构数据的改变的，但是VUE中的watch默认不能（可通过deep实现）
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'VUE',
        isHot:true,
        firstName:'杜',
        secondName: '月笙',
        fullName: '杜月笙' // watch实现必须要有初始值
      },
      // computed:{
      //   fullName(){
      //     return this.firstName + "" + this.secondName
      //   }
      // },
      watch:{
        firstName(newValue){
          setTimeout(() => {
            return this.fullName = newValue + "" + this.secondName
          }, 1000);
        },

        secondName(newValue){
          return this.fullName = this.firstName + "" + newValue
        }
      }
    })

  </script>
</html>